<template>
	<view>
		<view class="nav" :style="{'padding-top': statusbar_height + 'px'}">
			<view class="tabbar">
				<view class="tabbar-left" @click="navBack">
					<image src="/pagesShop/static/left.svg" mode="widthFix"></image>
				</view>
				<view class="tabbar-center">
					<view class="tabbar-tab">
						<view class="tabbar-tab-item" :class="{active: currentIndex1 === 2 }" @click="changeTab1(2)">
							团购订单
						</view>
						<view class="tabbar-tab-item" :class="{active: currentIndex1 === 3 }" @click="changeTab1(3)">
							砍价订单
						</view>
					</view>
				</view>
				<view class="tabbar-right"></view>
			</view>
			<view class="navbar">
				<view class="navbar-item" :class="{active: currentIndex2 == 0 }" @click="changeTab2(0)">
					全部
				</view>
				<view v-if="currentIndex1 === 3" class="navbar-item" :class="{active: currentIndex2 == 9 }" @click="changeTab2(9)">
					砍价中
				</view>
				<view v-if="currentIndex1 === 2" class="navbar-item" :class="{active: currentIndex2 === 8}" @click="changeTab2(8)">
					拼团中
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 == 2 }" @click="changeTab2(2)">
					待发货
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 == 3 }" @click="changeTab2(3)">
					待收货
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 == 4 }" v-if="currentIndex1 == 2" @click="changeTab2(4)">
					待评价
				</view>
			</view>
		</view>
		<view class="content">
			<view class="area" v-if="list.length > 0">
				<view class="" v-for="(item, key) in list" :key="key" @click.stop="goRouter1(item)">
					<view class="card">
						<view class="card-title flex flex_between">
							<view class="ct-name">
								<image class="tp-img32 tp-mr20" src="/pagesShop/static/shop.png" mode="widthFix"></image>
								<text>{{item.scName || item.shopName || '店铺名称'}}</text>
							</view>
							<view class="ct-status">
								<text>{{ item.status | f1 }}</text>
							</view>
						</view>
						<view class="card-content">
							<view class="cc-d">
								<view class="ccd-img">
									<image style="border-radius: 8rpx;" :src="wwwImgUrl + item.productPic" mode="aspectFill"></image>
								</view>
								<view class="ccd-c">
									<view class="ccd-t ellispsis1">
										{{item.productName || '商品名称'}}
									</view>
									<view class="ccd-i ellispsis1">
										<text v-for="(item3,index3) in handleArr1(item.productAttr)" :key="index3">{{item3.specification}}{{item3.value}}</text>
									</view>
									<view class="ccd-b">
										<view>￥{{item.productPrice || 0}}</view>
										<view>
											x{{item.productQuantity || 0}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="card-bottom" v-if="[1,2,3,4,6,7,8,9,10].includes(item.status - 0)">
							<view class="card-bottom-left">
								<!-- 砍价 -->
								<template v-if="currentIndex1 == 3">
									<view class="cbl-kj" v-if="[8].includes(item.status - 0)">
										<text>活动倒计时:{{item.f_time}}</text>
									</view>
									<view class="cbl-kj" v-if="[9].includes(item.status - 0)">
										<text>砍价成功</text>
									</view>
									<view class="cbl-kj" v-if="[10].includes(item.status - 0)">
										<text>砍价失败</text>
									</view>
								</template>
								<!-- 拼团 -->
								<template v-if="currentIndex1 == 2">
									<view class="cbl-kj" v-if="[7].includes(item.status - 0)">
										<text>拼团中，还差 {{(item.successNumber || 0) - (item.currentNumber || 0)}} 人成团</text>
									</view>
									<view class="cbl-pt" v-if="[1,2].includes(item.status - 0)">
										<image v-for="(item3,index3) in item.ptAdd.slice(0,5)" :key="index3" :src="/^[http | https]/.test(item3.customerAvatar) ? item3.customerAvatar : shopImgUrl + item3.customerAvatar" mode="aspectFill"></image>
									</view>
									<view class="cbl-kj" v-if="[6].includes(item.status - 0)">
										<text>拼团失败</text>
									</view>
								</template>
							</view>
							<view class="card-bottom-right tp-h88">
								<!-- 砍价 -->
								<template v-if="currentIndex1 === 3">
									<button v-if="[4].includes(item.status - 0)" plain @click.stop="action2(item.id)">删除订单</button>
									<button v-if="[2].includes(item.status - 0)" plain class="active" @click.stop="confirmReceive(item)">确认收货</button>
									<!-- <button v-if="[3].includes(item.status - 0)" plain class="active" @click.stop="goRouter2(item)">立即评价</button>
									<button v-if="[4].includes(item.status - 0)" plain class="active-plain" @click.stop="goRouter3(item)">查看评价</button> -->
								</template>
								<!-- 拼团 -->
								<template v-if="currentIndex1 === 2">
									<button v-if="[4].includes(item.status - 0)" plain @click.stop="action2(item.id)">删除订单</button>
									<button v-if="[2].includes(item.status - 0)" plain class="active" @click.stop="confirmReceive(item)">确认收货</button>
									<button v-if="[3].includes(item.status - 0)" plain class="active" @click.stop="goRouter2(item)">立即评价</button>
									<button v-if="[4].includes(item.status - 0)" plain class="active-plain" @click.stop="goRouter3(item)">查看评价</button>
								</template>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more color="#999" :status="status" v-if="list.length > 5"></uni-load-more>
			</view>
			<view class="nomore" v-if="list.length === 0 && !loading">
				<view class="nomore-text">
					<image src="/pagesShop/static/zanwu.png" mode="widthFix"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="handleMoney(handleItem)" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import utils from '../../utils/utils.js';
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		filters: {
			f1(v) {
				if (v === '0') {
					return '待付款'
				} else if (v === '1') {
					return '待发货'
				} else if (v === '2') {
					return '待收货'
				} else if (v === '3') {
					return '待评价'
				} else if (v === '4') {
					return '已完成'
				} else if (v === '7') {
					return '拼团中'
				} else if (v === '8') {
					return '砍价中'
				} 
			}
		},
		data() {
			return {
				// countDownStartTime: "00:00", // 倒计时
				// timer: null, 
				currentIndex1: 2,
				currentIndex2: '',
				loading: false,
				page: 1,
				status: 'more',
				list: [],
				handleItem: {},
				timer: null,// 倒计时的变量
			};
		},
		computed: {
			orderInfo() {
				let o = {
					orderNo: this.handleItem.orderSn,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		onShow() {
			this.getList1()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.getList1()
		},
		onReachBottom() {
			this.getList1_1()
		},
		methods: {
			// 确认收货
			confirmReceive(item) {
				this.$http.post(this.$api.confirmReceipt + '?id=' + item.id).then(res => {
					if (res.code == 200) {
						this.getList1()
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
					}
				})
			},
			// 去评价
			goRouter2(info) {
				const shopInfo = info
				console.log(shopInfo);
				const pageName = this.currentIndex1 === 2 ? '团购' : '砍价';
				uni.navigateTo({
					url: '../details/evaluate?pageName=' + pageName + '&orderNo=' + info.orderSn + '&shopInfo=' + JSON.stringify(
						shopInfo)
				})
			},
			// 查看评价
			goRouter3(item) {
				const pageName = this.currentIndex1 == 2 ? '团购' : '砍价';
				uni.redirectTo({
					url: '../details/evaluate?pageName=' + pageName + '&pageType=1&orderNo=' + item.orderSn
				});
			},
			// 定时更新
			formatTime() {
				this.timer = setInterval(() => {
					this.list.map((item,index) => {
						const time = this.computeTime(item.kjFinishTime)
						// console.log(time);
						this.$set(this.list[index],'f_time',time)
					})
				},1000)
			},
			// 计算列表倒计时
			computeTime(finishTime) {
				finishTime = finishTime.replace(/-/g,"/")
				if(typeof finishTime === 'string' && new Date(finishTime).toString() !== 'Invalid Date') {
					const now_time = new Date().getTime()
					const finish_time = new Date(finishTime).getTime()
					const sy_time = finish_time-now_time
					if(sy_time > 0) {
						 // 时
						const hour = Math.floor( sy_time / (1000*60*60) ).toString().padStart(2,'0')
						const sy_time1 = Math.floor( sy_time % (1000*60*60) )
						// 分
						const min = Math.floor( sy_time1 / (1000*60) ).toString().padStart(2,'0')
						const sy_time2 = Math.floor( sy_time1 % (1000*60) )
						// 秒
						const sec = Math.floor( sy_time2 / (1000) ).toString().padStart(2,'0')
						// 剩余时间
						const time_str = `${hour}:${min}:${sec}`
						return time_str
					} else {
						return '活动已结束'
					}
				} else {
					return '无效的结束时间'
				}
			},
			// 商城订单列表
			getList1() {
				this.page = 1;
				this.loading = true
				this.status = 'more'
				this.$http.post(this.$api.shop_list_11, {}, {
					params: {
						pageNum: this.page,
						type: this.currentIndex1,
						status: this.currentIndex2 > 0 ? this.currentIndex2 - 1 : '',
					}
				}).then(res => {
					this.loading = false
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						const list = res.data.result
						console.log(list)
						if (list.length > 0) {
							list.map(item => {
								item.f_time = ''
								return item
							})
							this.list = list
							this.formatTime();
					} else {
						this.list = []
						this.status = 'noMore'
					}
					}
				}).catch(() => {
					this.loading = false
					uni.stopPullDownRefresh()
					this.list = []
				})
			},
			getList1_1() {
				if (this.status === 'noMore') return
				this.page++;
				this.status = 'loading'
				this.$http.post(this.$api.shop_list_11, {}, {
					params: {
						pageNum: this.page,
						type: this.currentIndex1,
						status: this.currentIndex2,
					}
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						const list = res.data.result
						if (list.length > 0) {
							list.map(item => {
								item.f_time = ''
								return item
							})
							this.list = this.list.concat(list)
							this.formatTime();

						} else {
							this.status = 'noMore'
						}
					} else {
						this.list = []
						this.status = 'noMore'
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
					this.list = []
				})
			},
			// 取消订单
			action1(orderSn) {
				this.$http.post(this.$api.shop_order_3, {}, {
					params: {
						id: orderSn, // 订单id
					}
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						this.getList1()
					}
				})
			},
			// 删除订单
			action2(id) {
				this.$http.post(this.$api.shop_order_10, {}, {
					params: {
						id: id, // 订单id
					}
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						this.getList1()
					}
				})
			},
			changeTab1(index) {
				this.currentIndex1 = index
				this.getList1()
			},
			changeTab2(index) {
				this.currentIndex2 = index
				this.getList1()
			},
			// 查看订单详情
			goRouter1(item) {
				if (this.currentIndex1 == 2) { //去拼团详情
					uni.navigateTo({
						url: `../order/tg_wait_order?oid=${item.orderSn}&id=${item.id}`
					})
				}
				if (this.currentIndex1 == 3) { //去砍价详情
					uni.navigateTo({
						url: '/pagesShop/order/kanjiaDetail?id=' + item.id + '&orderno=' + item.orderSn
					})
				}
			},
			handleArr1(str) {
				if (typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch (e) {
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
			// 立即支付金额
			handleMoney(item) {
				const price = parseInt(item.productPrice)
				const num = parseInt(item.productQuantity)
				if (!isNaN(price) && !isNaN(num)) {
					return price * num
				} else {
					return 0
				}
			},
			// 立即支付
			handePay(item) {
				this.handleItem = item
				this.$refs.commonPay.show()
			},
			// 余额支付成功
			payMoney(pwd) {
				// #ifdef MP-WEIXIN
				let url = this.$api.shop_order_7 + '?orderNo=' + this.handleItem.orderSn + '&payType=0&sourceType=0&payPassword=' +
					pwd
				// #endif
				// #ifdef H5
				let url = this.$api.shop_order_7 + '?orderNo=' + this.handleItem.orderSn + '&payType=3&sourceType=2&payPassword=' +
					pwd
				// #endif
				this.$http.post(url).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.getList1()
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background-color: #00B4FF;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 88px;
		padding-top: var(--status-bar-height);
	}
	
	.tabbar {
		height: 44px;
		display: flex;
		justify-content: space-between;
	}
	
	.tabbar-left,
	.tabbar-right {
		width: 100rpx;
		height: 100%;
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	
		image {
			width: 40rpx;
			height: auto;
		}
	}
	
	.tabbar-center {
		flex-grow: 1;
		height: 100%;
	}
	
	.tabbar-tab {
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	.tabbar-tab-item {
		font-size: 30rpx;
		color: #fff;
		width: 4em;
		margin: 0 50rpx;
	
		&.active {
			font-weight: bold;
		}
	}
	
	.navbar {
		height: 44px;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
	}
	
	.navbar-item {
		flex-grow: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		font-size: 30rpx;
	
		&.active {
			color: #00B4FF;
			font-weight: bold;
	
			&::after {
				content: '';
				width: 36rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background-color: #00B4FF;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -18rpx;
			}
		}
	}
	
	.nomore {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
	}
	
	.nomore-text {
		text-align: center;
		font-size: 30rpx;
	
		image {
			width: 200rpx;
			height: auto;
			margin-bottom: 20rpx;
		}
	}
	
	.card {
		background-color: #fff;
		box-sizing: border-box;
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
	}
	
	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}
	
	.ct-s {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.ct-name {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		width: 400rpx;
	}
	
	.ct-status {
		font-size: 26rpx;
		color: #FFAF3C;
	}
	
	.card-content {
		display: flex;
		padding: 0 30rpx 30rpx;
	}
	
	.cc-s {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.cc-d {
		display: flex;
		align-items: center;
		width: 100%;
	}
	
	.ccd-img {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		margin-right: 20rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.ccd-c {
		flex-grow: 1;
	}
	
	.ccd-t {
		font-size: 26rpx;
		color: #333;
	}
	
	.ccd-i {
		margin: 18rpx 0 24rpx;
	
		text {
			color: #999;
			font-size: 24rpx;
			margin-right: 20rpx;
		}
	}
	
	.ccd-b {
		display: flex;
		justify-content: space-between;
		
		text {
			font-size: 24rpx;
		}
	
		view {
			&:nth-of-type(1) {
				font-size: 28rpx;
				color: $uni-color-error;
				font-weight: bold;
			}
	
			&:nth-of-type(2) {
				display: flex;
				align-items: center;
			}
		}
	}
	
	.card-bottom {
		border-top: 1px solid #e8e8e8;
		display: flex;
		justify-content: space-between;
	
		button {
			background-color: #EBEBEB;
			color: #666;
			border: 1px solid #ddd;
			padding: 15rpx;
			font-size: 28rpx;
			line-height: 1;
			border-radius: 12rpx;
			margin: 0 30rpx 0 0;
	
			&.active {
				background-color: #00B4FF;
				color: #fff;
				border: 0;
			}
			
			&.active-plain {
				background-color: transparent;
				color: #00B4FF;
				border: 1px solid #00B4FF;
			}
		}
	}
	
	.goods-img {
		width: 140rpx;
		height: 140rpx;
	}
	
	.card-info {
		font-size: 24rpx;
		color: #333;
		text-align: right;
		padding: 30rpx;
	}
	
	.cbl-kj {
		margin: 20rpx 30rpx ;
		font-size: 26rpx;
		text {
			color: #FF4A37;
		}
	}
	
	.cbl-pt {
		padding: 20rpx 0 20rpx 30rpx;
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	
	.card-bottom-left {
		flex-grow: 1;
		display: flex;
		align-items: center;
	}
	
	.card-bottom-right {
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
</style>
